<template>
  <div class="breadcrumb">
    <span
      v-for="(item,index) in navInfo"
      :key="index"
      class="breadcrumb-item"
      :class="{'active':(index!==0&&index!==(navInfo.length-1))}"
      @click='goToRoute(item.routeName)'
    >
        {{item.name}}
        <i class="separator" v-show="index!==(navInfo.length-1)"></i>
    </span>
  </div>
</template>

<script>
  export default {
    name: "breadcrumb",
    data() {
      return {
        breadData: [{
          to: '/',
          name: '主页',
          icon: 'home'
        }, {
          to: '/123',
          name: '新闻',
          icon: 'funnel'
        }, {
          to: '/abc',
          name: '新闻编辑',
          icon: 'soup-can'
        }]
      }
    },
    computed: {
      navInfo() {
        return this.$store.getters.getBreadcrumbInfo
      }
    },
    methods: {
      goToRoute(routeName) {
        if (!routeName) {
          return false
        }
        this.$router.push({name: routeName})
      }
    }
  }
</script>

<style lang='less' type='text/less' scoped>
  .breadcrumb {
    height: @layout1BreadHeight;
    line-height: @layout1BreadHeight;
    .breadcrumb-item {
      /*margin-right: 10px;*/
      font-size: 14px;
    }
    .separator {
      display: inline-block;
      margin: 0 12px;
      height: 14px;
      width: 1px;
      vertical-align: -2px;
      transform: rotate(30deg);
      background-color: #aaa;
    }
    .active {
      cursor: pointer;
      color: #00aeff;
    }
  }
</style>
